.empty-div{
    min-height: 100px;
}
.slider-container{
  display: grid;
  grid-template-rows: 20rem;
}

  .slider,.slider {
    width: 100%;
    position: relative;
    overflow: hidden;
  } 
  .slide {
    text-align: center;
    position: absolute;
    top: 5rem;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .slide.active{
    opacity: 1;
  }
  .slide h1{
    color: white;
    /* margin-bottom: 1rem; */
    text-shadow: 2px 2px 8px black;
    font-size: 6rem;
    font-weight: 900;
  }
  .slide h3{
    /* color: #F2C83B; */
    color: #ffe000;
    /* color: #FFD700; */
    text-shadow: 2px 2px 8px black;
    font-size: 3rem;
    font-weight: bold;
    
  }
  /* STYLING FOR SPECIAL SLIDER */
  /* .slide-l.active,.slide-r.active {
    opacity: 1;
  } 
   .slider-l,.slider-r {
    width: 100%;
    position: relative;
    overflow: hidden;
  } 
  .slider-l{
    border-right: solid black;
  } 
   .slide-l,.slide-r {
    text-align: center;
    position: absolute;
    top: 5rem;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  } 
  .slide-l h1{
    color: white;
    text-shadow: 2px 2px 8px black;
    font-size: 4.2rem;
  }
  .slide-r h2{
    color: #F2C83B;
    text-shadow: 2px 2px 8px black;
    font-size: 3.5rem;
  } */
@media all and (max-width:800px){
  .empty-div{
    min-height: 25px;
  }
  .slider h1{
    font-size: 3.5rem;
  }
  .slider h3{
    font-size: 2.5rem;
  }
}

@media all and (min-width:551px) and (max-width:800px){
  .slider h1{
    font-size: 4.5rem;
  }
  .slider h3{
    font-size: 2.5rem;
  }
  .empty-div{
    min-height: 60px;
  }
  
}